---
name: useSessionStorageState
route: /useSessionStorageState
menu: 'State'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3CodeTsx from '!raw-loader!./demo/demo3.tsx';
import Demo3CodeJsx from '!raw-loader!./demo/demo3.jsx';

# useSessionStorageState

一个可以将状态持久化存储在 sessionStorage 中的 Hook 。

## 代码演示

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='将 state 持久化在 sessionStorage 中' description='刷新页面后，可以看到输入框中的内容被从 sessionStorage 中恢复了。'>
  <Demo1 />
</JackBox>

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='存储对象' description='useSessionStorageState 会自动处理序列化和反序列化的操作。'>
  <Demo2 />
</JackBox>

<JackBox jsCode={Demo3CodeJsx} tsCode={Demo3CodeTsx} demoName='使用 function updater 存储' description='useSessionStorageState 里也可以用 function updater，就像 useState 那样。'>
  <Demo3 />
</JackBox>

## API

```typescript
const [state, setState] = useSessionStorageState<T>(
  key: string,
  defaultValue?: T | (() => T),
): [T?, (value?: T | ((previousState: T) => T)) => void]
```
它的API和 `useState` 非常类似，但是多了一个参数 `key` ，用来指定在 sessionStorage 中存储时所使用的 `key` 。而它的返回值类型和 `useState` 保持了一致，当调用 `setState` 时，它会自动将新值写入到 sessionStorage 中。

如果想从 sessionStorage 中删除这条数据，可以使用 `setState()` 或 `setState(undefined)` 。
